@mixin wh($width, $height) {
    width: $width;
    height: $height;
    display: block;
}

@mixin flex-variant($display, $direction: false, $align: false, $justify: false, $wrap: false) {
    display: $display;

    @if $direction {
        flex-direction: $direction;
    }

    @if $align {
        align-items: $align;
    }

    @if $justify {
        justify-content: $justify;
    }

    @if $wrap {
        flex-wrap: $wrap;
    }

    //fix
    &>* {
        min-width: 0;
    }
}

@mixin flex($direction: false, $align: false, $justify: false, $wrap: false) {
    @include flex-variant(flex, $direction: $direction , $align: $align , $justify: $justify , $wrap: $wrap);
}

@mixin vertical-align {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

@mixin center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@mixin ellipsis($rowCount: 1) {
    @if $rowCount <=1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    @else {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: $rowCount;
        -webkit-box-orient: vertical;
    }
}

/* 单条border样式*/
@mixin border-1px($direction, $color: $color-border-line) {
    position: relative;

    &::after {
        content: "";
        position: absolute;
        background: $color;

        @if $direction ==left {
            left: 0;
            top: 0;
            height: 100%;
            width: 2px;
            transform: scaleX(0.5);
            transform-origin: left 0;
        }

        @if $direction ==right {
            right: 0;
            top: 0;
            height: 100%;
            width: 2px;
            transform: scaleX(0.5);
            transform-origin: right 0;
        }

        @if $direction ==top {
            left: 0;
            top: 0;
            height: 100%;
            width: 2px;
            transform: scaleY(0.5);
            transform-origin: 0 top;
        }

        @if $direction ==bottom {
            left: 0;
            bottom: 0;
            height: 100%;
            width: 2px;
            transform: scaleY(0.5);
            transform-origin: 0 bottom;
        }
    }
}

@mixin gray() {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}